<template>
   <div class="container" @click="handlerCloseClick">
       <div class="wrapper">
            <swiper :options="swiperOptions" ref="mySwiper">
                <!-- slides -->
                <swiper-slide v-for="(item , index) of imgs" :key="index">
                    <img class="gallry-img" :src="item"/>
                </swiper-slide>
                                
                <!-- Optional controls -->
                <!-- 分页的内容 -->
                <div class="swiper-pagination"  slot="pagination"></div>    
            </swiper>
       </div>
    </div> 
</template>
// observer:true, observeParents:true, 将observe应用于Swiper的父元素。
    // 当Swiper的父元素变化时，例如window.resize，Swiper更新。
<script>
export default {
    name:"Gallary",
    props:{
        imgs:Array,
        default () {
            return []
        }

    },
    data () {
        return {
            swiperOptions: {
                //  <div class="swiper-pagination"  slot="pagination"></div> 
                pagination : '.swiper-pagination',
                paginationType:'fraction',
                observer:true,
                observeParents:true,
            }
        }
    },
    methods: {
        handlerCloseClick() {
            this.$emit('closeGallary')
        }
    }
}
</script>
// justify-content :center   	项目位于容器的中心。
// flex-direction :column   灵活的项目将垂直显示，正如一个列一样
// overflow :inherit 除了swiper-pagination，其他的overflow都有效

<style lang="stylus" scoped>
    .container >>> .swiper-container
        overflow :inherit
    .container
        display :flex
        flex-direction :column
        justify-content :center
        position :fixed
        top :0
        left :0
        right :0
        bottom :0
        background :#000
        z-index :99
        .wrapper                     
            height :0
            width :100%
            padding-bottom :75%
            background :#fff
            .gallry-img
                width :100%
            .swiper-pagination
                color :#fff
                bottom :-1rem

</style>


